<template>

  <div class="main-content" style="width: 50%">
    <div style="display: flex ;grid-gap: 20px;margin-bottom: 40px">
      <img :src="data.room.img" style="width: 450px;height: 300px">
      <div style="flex: 1">
        <div style="font-size: 24px">{{data.room.name}}</div>
        <div style="margin: 40px 0; ">具体位置：{{data.room.location}}</div>
        <div style="margin: 40px 0; ">开放时间：{{data.room.openTime}}</div>
        <div style="color: #666">预约须知：请提前预约第二天的座位，预约成功后请及时使用，禁止违规占座、替他人预约</div>
      </div>
    </div>

    <div>
      <div style="display: flex;justify-content: center;margin-bottom: 20px">
        <div style="font-size: 23px;font-weight: bold;width: fit-content;padding-bottom: 10px;border-bottom: 5px solid red">座位预约</div>
      </div>
      <div style="display: flex;justify-content: center">
        <div class="card" style="width: 50%;padding: 20px">
          <div style="display: flex;align-items: center;margin-left: 50px">
            <img src="@/assets/img/wxzw.png" style="width: 30px;height: 30px;margin-right: 5px"><span style="margin-right: 30px">未选</span>
            <img src="@/assets/img/yxzw.png" style="width: 30px;height: 30px;margin-right: 5px"><span>已选</span>
          </div>
          <div style="margin: 50px 0;display: flex;justify-content: center">
            <div style="width: 230px;display: flex;align-items: center;flex-wrap: wrap">
              <div @click="selectSeat(item.id)" v-for="item in data.seatList" :key="item.id" class="seat-item">
                <img v-if="item.status ==='已选'" src="@/assets/img/yxzw.png" style="width: 30px;height: 30px">
                <img v-if="item.status !=='已选' && data.activeSeatId !== item.id" src="@/assets/img/wxzw.png" style="width: 30px;height: 30px">
                <img v-if="item.status !=='已选'&& data.activeSeatId === item.id" src="@/assets/img/xzzw.png" style="width: 30px;height: 30px">
                <div>{{item.no}}</div>
              </div>
            </div>
          </div>
          <div style="text-align: center">
            <el-button @click="reserve" type="primary" style="padding: 20px 30px">座位预约</el-button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>

import {reactive} from "vue";
import request from "@/utils/request.js";
import router from "@/router/index.js";
import {ElMessage} from "element-plus";

const data=reactive({
  id:router.currentRoute.value.query.id,
  room:{},
  seatList:[],
  activeSeatId:null
})

const selectSeat = (seatId) => {
  data.activeSeatId=seatId
}
const reserve = () => {
  if (!data.activeSeatId){
    ElMessage.warning('请选择座位')
    return
  }
  request.post('/seatReserve/add',{seatId:data.activeSeatId}).then(res=>{
    if (res.code ==='200'){
      ElMessage.success('预约成功')
      loadSeats()
    }else{
      ElMessage.error(res.msg)
    }
  })
}

const loadSeats = () => {
  request.get('/seat/selectAll',{
    params:{
      roomId:data.id
    }
  }).then(res=>{
    data.seatList=res.data
  })
}
loadSeats()
request.get('/room/selectById/'+data.id).then(res=>{
  data.room=res.data
})
</script>

<style scoped>
.seat-item{
  text-align: center;
  margin-bottom: 20px;
  cursor: pointer;
  margin-right: 20px;
}
.seat-item:nth-child(5n){
  /*去除第5n个元素的右边距*/
  margin-right: 0;
}
</style>

